<template>
  <PageDetail :visible.sync="detailVisible">
    <div class="custom-ant">
      <div class="header-info-box">
        <span>供应商名称：</span><span class="text">河南盛世机械工具集团有限公司</span>
        <span class="ml-30">供应商状态：</span><span class="text">准入供应商</span>
        <span class="ml-30">审批状态：</span><span class="text">审批中</span>
      </div>
      <a-card title="供应商基本资料" :bordered="false">
        <div class="basic-info-detail-box">
          <div class="edit-btn">
            <a-button icon="edit" @click="onEdit">编辑</a-button>
          </div>
          <div class="item-box">
            <div class="item"><span>供应商编号</span>：<span>GYS6667787990</span></div>
            <div class="item"><span>统一社会信用代码</span>：<span>914401017435912</span></div>
            <div class="item"><span>法定代表人</span>：<span>杨先生</span></div>
            <div class="item"><span>联系地址</span>：<span>广州市增城市新塘永宁街35号</span></div>
            <div class="item"><span>联系电话</span>：<span>13800138000</span></div>
            <div class="item"><span>开户行</span>：<span>中国工商银行</span></div>
            <div class="item"><span>收款账号</span>：<span>6212263602053303588</span></div>
            <div class="item"><span>收款人</span>：<span>杨先生</span></div>
          </div>
          <div class="item-box">
            <div class="item"><span>员工人数</span>：<span>14400(2023年)</span></div>
            <div class="item"><span>营业收入</span>：<span>115.00万元(2023年)</span></div>
            <div class="item"><span>注册资本</span>：<span>8600000</span></div>
            <div class="item"><span>成立日期</span>：<span>2013-07-15</span></div>
            <div class="item"><span>电话</span>：<span>20-82962899</span></div>
            <div class="item"><span>地址</span>：<span>广州市增城市新塘永宁街35号</span></div>
            <div class="item"><span>邮箱</span>：<span>jshd88997@163.com</span></div>
          </div>
          <div class="item-box">
            <div class="item">
              <div>经营范围：</div>
              <span>土石方工程、拆除工程;建筑机械设备销售、租赁、维修及配件销售;机电、水暖销售、安装;渣土运输土石方工程、拆除工程;建筑机械设备销售、租赁、维修及配件销售;机电、水暖销售、安装;渣土运输土石方工程、拆除工程;建筑机械设备销售、租赁、维修及配件销售;机电、水暖销售、安装;渣土运输。</span>
            </div>
          </div>
        </div>
        <div class="mt-20">
          <a-tabs type="card" v-model="curTabValue" @change="tabChange">
            <a-tab-pane v-for="item in tabList" :key="item.key" :tab="item.tab"></a-tab-pane>
          </a-tabs>
          <keep-alive>
            <component ref="curComponent" :is="curComponent" />
          </keep-alive>
        </div>
      </a-card>
      <!-- 供应商注册信息 -->
      <SupplierRegisterInfo ref="SupplierRegisterInfo">
        <template v-slot:footer>
          <div class="space-btn">
            <a-button type="primary" @click="onConfirm">确定</a-button>
            <a-button @click="onCancel">取消</a-button>
          </div>
        </template>
      </SupplierRegisterInfo>
    </div>
    <template v-slot:footer>
      <template v-if="curTabValue === '1'">
      </template>
      <!-- 审批流程节点明细 -->
      <AapprovalProcess />
      <a-button @click="onBack">返回</a-button>
      <a-button type="danger" @click="onWithdraw">撤回</a-button>
      <a-button type="primary">提交</a-button>
      <a-button>保存草稿</a-button>
    </template>
  </PageDetail>
</template>

<script>
import SupplierRegisterInfo from '@views/supplier-manage/register/components/SupplierRegisterInfo.vue'
import QualificationCertificate from '@views/supplier-manage/admittance/components/QualificationCertificate.vue';
import SiteInspection from '@views/supplier-manage/admittance/components/SiteInspection.vue';
import SampleCertification from '@views/supplier-manage/admittance/components/SampleCertification.vue';
import RiskAssessment from '@views/supplier-manage/admittance/components/RiskAssessment.vue';
import AapprovalProcess from '@views/supplier-manage/admittance/components/AapprovalProcess.vue';

export default {
  components: {
    SupplierRegisterInfo,
    QualificationCertificate,
    SiteInspection,
    SampleCertification,
    RiskAssessment,
    AapprovalProcess
  },
  data() {
    return {
      detailVisible: false,
      curTabValue: '1',
      tabList: [
        { tab: '资质证书', key: '1'  },
        { tab: '现场考察', key: '2' },
        { tab: '样品认证', key: '3' },
        { tab: '风险评估', key: '4' },
      ]
    }
  },
  computed: {
    curComponent() {
      const componentEnum = {
        '1': QualificationCertificate,
        '2': SiteInspection,
        '3': SampleCertification,
        '4': RiskAssessment,
      };
      return componentEnum[this.curTabValue];
    }
  },
  methods: {
    open() {
      this.detailVisible = true;
    },
    onEdit() {
      this.$refs.SupplierRegisterInfo.onDrawerOpen();
    },
    onConfirm() {
      this.$refs.SupplierRegisterInfo.onSave();
    },
    onCancel() {
      this.$refs.SupplierRegisterInfo.onDrawerClose();
    },
    tabChange() {
    },
    onBack() {
      this.detailVisible = false;
    },
    onWithdraw() {
      this.$confirm({
        title: '撤回',
        content: '确认撤回？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.onBack();
          this.$message.success(`操作成功`);
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
.header-info-box {
  height: 60px;
  line-height: 60px;
  border-radius: 8px;
  background-color: rgba(240, 250, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 16px;
  box-shadow: 0px 3px 8px 0px rgba(80, 135, 236, 0.2);

  padding: 0 25px;
  margin-bottom: 4px;
  .text {
    font-weight: bold;
  }
}

.basic-info-detail-box {
  display: flex;
  justify-content: space-between;
  border-radius: 4px;
  border: 1px solid rgba(187, 187, 187, 1);
  padding: 15px 60px;
  position: relative;
  .edit-btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  .item-box {
    width: 33%;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
  }
  .item {
    line-height: 26px;
  }
}

.footer-box {
  // position: sticky;
  // left: 0;
  // bottom: 0;
  // width: 100%;
  height: 50px;
  line-height: 50px;
  border-radius: 0px 0px 8px 8px;
  background-color: rgba(31, 127, 227, 0.08);
  color: rgba(16, 16, 16, 1);
  text-align: center;
  border: 1px solid rgba(204, 204, 204, 1);
}
</style>